<template>
	<view class="container">
		<image :src="imageUrl + '/yunzhanguan/yunzhanguanimage-49603.png'" class="beijing"></image>
	<view class="liebiao">
	  <view class="liebiao1">
		<view class="liebiao1-1" @click="navigateToPage(0)"><image :src="imageUrl + '/daolan/daolanGroup-1221.png'" class="liebiao-image"></image></view>
		<view class="liebiao1-2" @click="navigateToPage(1)"><image :src="imageUrl + '/daolan/daolanGroup-1222.png'" class="liebiao-image"></image></view>
	  </view>
	  <view class="liebiao2">
		<view class="liebiao1-1" @click="navigateToPage(2)"><image :src="imageUrl + '/daolan/daolanGroup-1224.png'" class="liebiao-image"></image></view>
		<view class="liebiao1-2" @click="navigateToPage(3)"><image :src="imageUrl + '/daolan/daolanGroup-1225.png'" class="liebiao-image"></image></view>
	  </view>
	  <view class="liebiao3">
		<view class="liebiao1-1" @click="navigateToPage(4)"><image :src="imageUrl + '/daolan/daolanGroup-1226.png'" class="liebiao-image"></image></view>
		<view class="liebiao1-2" @click="navigateToPage(5)"><image :src="imageUrl + '/daolan/daolanGroup-1227.png'" class="liebiao-image"></image></view>
	  </view>
	</view>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-zuo-1"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-zuo-2"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-zuo-3"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-zuo-4"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-zuo-5"></image>
	
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-you-1"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-you-2"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-you-3"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-you-4"></image>
	<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="yunwu-you-5"></image>
	<view class="daohang">
		<view class="daohang-left">
			<image :src="imageUrl + '/daolan/daolanGroup-885.png'" class="liebiao-image" @click="tiaozhuan1"></image>
		</view>
		<view class="daohang-right">
			<image :src="imageUrl + '/daolan/daolanGroup-857.png'" class="liebiao-image" @click="tiaozhuan2"></image>
		</view>
	</view>
	<!-- 动画 -->
	<view class="wu-lefy">
		<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="wu-lefy-kj-1" :class="{'move-left-animation': isAnimationActive}"></image>
		<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="wu-lefy-kj-2" :class="{'move-left-animation': isAnimationActive}"></image>
		<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="wu-lefy-kj-3" :class="{'move-left-animation': isAnimationActive}"></image>
		<image :src="imageUrl + '/daolan/daolanimage 49684.png'" class="wu-lefy-kj-4" :class="{'move-left-animation': isAnimationActive}"></image>
	</view>
	<view class="wu-right">
		<image :src="imageUrl + '/daolan/daolanimage 49684 1.png'" class="wu-right-1" :class="{'move-right-animation': isAnimationActive}"></image>
		<image :src="imageUrl + '/daolan/daolanimage 49684 1.png'" class="wu-right-2" :class="{'move-right-animation': isAnimationActive}"></image>
		<image :src="imageUrl + '/daolan/daolanimage 49684 1.png'" class="wu-right-3" :class="{'move-right-animation': isAnimationActive}"></image>
		<image :src="imageUrl + '/daolan/daolanimage 49684 1.png'" class="wu-right-4" :class="{'move-right-animation': isAnimationActive}"></image>
	</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      currentPath: '',
      imageUrl: this.$imageUrl,
	  isAnimationActive: false,
      showImage: false,
      showImage2: false,
      touchStartX: 0,
      touchStartY: 0,
      startY: 0,
      pagePaths: [
        '/pagesNew/pages/index/shouyeziwenjian',
        '/pagesNew/pages-online-cloud/list-of-cloud-exhibition/list of cloud exhibition halls',
        '/pagesNew/pages-exploration-discovery/Explore the wisdom of village construction/daolantsfx',
        '/pagesNew/pages-public-welfare/pages-public-xiangqing/pages-public-xiangqing',
        '/pagesNew/pages-Cultural-and-Creative/Cultural-and-Creative-Product',
        '/pagesNew/pages-special-local/pages-special-products/tea-drink'
      ]
    };
  },
  methods: {
  navigateToPage(index) {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const currentPath = currentPage.route;
      console.log('即将跳转到的页面路径：', this.pagePaths[index]);
      console.log('当前页面路径（作为参数传递）：', currentPath);
      wx.redirectTo({
          url: `${this.pagePaths[index]}?fromPage=${currentPath}`
      });
  },
    tiaozhuan1() {
      wx.redirectTo({
        url: '/pagesNew/pages/index/index',
      });
    },
    tiaozhuan2() {
      wx.redirectTo({
        url: '/pagesNew/pages-my/pages-my',
      });
    },
	 triggerAnimation() {
	      // 触发动画的代码
		  this.isAnimationActive = true;
	      this.startMoveLeftAnimation();
	      this.startMoveRightAnimation();
	    },
	    startMoveLeftAnimation() {
	      const elements = document.querySelectorAll('.wu-lefy-kj-*');
	      elements.forEach(el => {
	        el.style.animation = 'moveLeft 2s linear 1';
	        el.style.animationFillMode = 'forwards';
	      });
	    },
	    startMoveRightAnimation() {
	      const elements = document.querySelectorAll('.wu-right-*');
	      elements.forEach(el => {
	        el.style.animation = 'moveRight 2s linear 1';
	        el.style.animationFillMode = 'forwards';
	      });
	    }
  }
};
</script>
<style scoped>
.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #E4EBE9 ;
}
.beijing{
	z-index: 1;
	height: 100%;
	width: 100%;
}
.liebiao{
	z-index: 2;
	position: absolute;
	width: 100vw;
	height: 80.5vh;
	margin-top: 92rpx;
	display: flex;
	flex-direction: column;
}
.liebiao-image{
	width: 100%;
	height: 100%;
}
.liebiao1{
	width: 100%;
	height: auto;
	display: flex;
	margin-top: 192rpx;
}
.liebiao2{
	width: 100%;
	height: auto;
	display: flex;
	margin-top: 22rpx;
}
.liebiao3{
	width: 100%;
	height: auto;
	display: flex;
	margin-top: 28rpx;
}
.liebiao1-1{
	width: 34.6vw;
	height: 20.6vh;
	margin-left: 12vw;
}
.liebiao1-2{
	width: 34.6vw;
	height: 20.6vh;
	margin-left: 26rpx;
}
.daohang{
	z-index: 2;
	display: flex;
	position: absolute;
	width: 100%;
	height: auto;
	margin-top: 88vh;
}
.daohang-left{
	width: 160.17rpx;
	height: 160.25rpx;
	margin-left: 222rpx;
}
.daohang-right{
	width: 160.17rpx;
	height: 160.25rpx;
	margin-left: -20rpx;
}
.wu-lefy{
	position: absolute;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
}
.wu-lefy-kj-1{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-left: -400rpx;
}
.wu-lefy-kj-2{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-left: -600rpx;
	margin-top: -250rpx;
}
.wu-lefy-kj-3{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-left: -600rpx;
	margin-top: -200rpx;
}
.wu-lefy-kj-4{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-left: -450rpx;
	margin-top: -350rpx;
}
.wu-right{
	position: absolute;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
}
.wu-right-1{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-top: 100rpx;
	margin-left: -200rpx;
}
.wu-right-2{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-top: -350rpx;
	margin-left: -200rpx;
}
.wu-right-3{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-top: -100rpx;
	margin-left: -350rpx;
}
.wu-right-4{
	z-index: 3;
	width: 1316rpx;
	height: 525.92rpx;
	overflow: visible;
	margin-top: -350rpx;
	margin-left: -350rpx;
}
 @keyframes moveLeft {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  @keyframes moveRight {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }
  .move-left-animation {
    animation: moveLeft 2s linear forwards;
  }
  
  .move-right-animation {
    animation: moveRight 2s linear forwards;
  }
  .yunwu-zuo-1{
	  position: absolute;
	  z-index: 1;
	  width: 658rpx;
	  height: 263rpx;
	  margin-top: 10vh;
	  margin-left: -30vw;
  }
  .yunwu-zuo-2{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
  	  margin-top: 25vh;
  	  margin-left: -40vw;
  }
  .yunwu-zuo-3{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
  	  margin-top: 49vh;
  	  margin-left: -20vw;
  }
  .yunwu-zuo-4{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
  	  margin-top: 60vh;
  	  margin-left: -25vw;
  }
  .yunwu-zuo-5{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
  	  margin-top: 85vh;
  	  margin-left: -30vw;
  }
  .yunwu-you-1{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
	  right: 0;
	  transform: rotate(180deg);
  	  margin-top: 10vh;
	  margin-right: -35vw;
  }
  .yunwu-you-2{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
	  right: 0;
	  transform: rotate(180deg);
  	  margin-top: 25vh;
	  margin-right: -30vw;
  }
  .yunwu-you-3{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
	  right: 0;
	  transform: rotate(180deg);
  	  margin-top: 49vh;
  	  margin-right: -40vw;
  }
  .yunwu-you-4{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
	  right: 0;
	  transform: rotate(180deg);
  	  margin-top: 60vh;
  	  margin-right: -40vw;
  }
  .yunwu-you-5{
  	  position: absolute;
  	  z-index: 1;
  	  width: 658rpx;
  	  height: 263rpx;
	  right: 0;
	  transform: rotate(180deg);
  	  margin-top: 83vh;
  	  margin-right: -35vw;
  }
</style>
